import React from "react";
import {ActionType, ProColumns, ProTable} from "@ant-design/pro-components";
import {Button, message, Popconfirm, Tag} from "antd";
import {PlusOutlined} from "@ant-design/icons";
import {addMenu, deleteMenu, pageMenu, updateMenuById} from "@/pages/system/menu/api";
import MenuEdit from "./components/MenuEdit";


const MenuManager: React.FC = () => {

  const actionRef = React.useRef<ActionType>();

  const columns: ProColumns<any>[] = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 32,
      align: 'center',
    },
    {
      title: '名称',
      dataIndex: 'name',
      ellipsis: true,
      key: 'name',
      align: 'center',
    },
    {
      title: '菜单类型',
      dataIndex: 'menuType',
      ellipsis: true,
      key: 'menuType',
      valueType: 'select',
      align: 'center',
      valueEnum: {
        "M": "目录",
        "C": "菜单",
        "F": "按钮"
      },
      render: (text, record,) => {
        return record.menuType === 'M' ? <Tag color="magenta">目录</Tag> :
          record.menuType === 'C' ? <Tag color="gold">菜单</Tag> : <Tag color="purple">按钮</Tag>
      },
    },
    {
      title: '权限',
      dataIndex: 'perms',
      ellipsis: true,
      key: 'perms',
      align: 'center',
    },
    {
      title: '路径',
      dataIndex: 'path',
      ellipsis: true,
      hideInSearch: true,
      align: 'center',
      key: 'path',
    },
    {
      title: '组件',
      dataIndex: 'component',
      ellipsis: true,
      hideInSearch: true,
      key: 'component',
    },
    {
      title: '状态',
      dataIndex: 'status',
      ellipsis: true,
      key: 'status',
      valueType: 'select',
      valueEnum: {
        "0": {
          text: '正常',
          status: 'Success',
        },
        "1": {
          text: '停用',
          status: 'Error',
        },
      },
    },
    {
      title: '路由名称',
      dataIndex: 'routeName',
      ellipsis: true,
      tooltip: '路由名称',
      key: 'routeName',
      hideInSearch: true,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      align: 'center',
      width: 200,
      render: (text, record) => [
        <MenuEdit
          isAdd={false}
          menu={record}
          key={`update`}
          triggerButton={
            <a>编辑</a>
          }
          onSubmit={async (values: API.IMenu) => {
            values.id = record.id
            values.version = record.version
            const {data} = await updateMenuById(values)
            if (data) {
              actionRef.current?.reload()
              message.success('修改成功')
            }
            return data
          }}
        />,
        <Popconfirm
          title={`确认删除`}
          description={`确认删除【${record.name}】权限吗？`}
          okText="确认"
          cancelText="取消"
          key={`delete`}
          onConfirm={async () => {
            const {data} = await deleteMenu(record.id)
            if (data) {
              actionRef.current?.reload()
              message.success('删除成功')
            }
          }}
        >
          <a target="_blank" rel="noopener noreferrer" key="delete">删除</a>
        </Popconfirm>,
        <a target="_blank" rel="noopener noreferrer" key="update" onClick={async () => {
          record.status = record.status === '0' ? '1' : '0'
          const {data} = await updateMenuById(record)
          if (data) {
            actionRef.current?.reload()
            message.success('修改成功')
          } else {
            message.error('修改失败')
          }
        }}>
          {record.status === '0' ? '停用' : '启用'}
        </a>
      ],
    },
  ]

  return (
    <ProTable<API.IMenu, API.PageParams>
      headerTitle={"权限表格"}
      actionRef={actionRef}
      rowKey="id"
      size={"small"}
      search={{
        labelWidth: "auto",
      }}
      toolBarRender={() => [
        <MenuEdit
          isAdd={true}
          key={`add`}
          triggerButton={
            <Button
              key="button"
              icon={<PlusOutlined/>}
              onClick={() => {
                actionRef.current?.reload();
              }}
              type="primary"
            >
              添加权限
            </Button>
          }
          onSubmit={async (values: API.IMenu) => {
            const {data} = await addMenu(values)
            if (data) {
              actionRef.current?.reload()
              message.success('添加成功')
            }
            return data
          }}
        />

      ]}
      pagination={{
        pageSize: 10
      } as any}
      request={async (params) => {
        const {data} = await pageMenu(params)
        return data
      }}
      columns={columns}
    />
  )

}

export default MenuManager;
